<template>
  <!--顶部组件 Start-->
    <TopHeader/>
  <!--顶部组件 end-->
  <!--搜索组件 start-->
    <Search/>
  <!--搜索组件 end-->
  <!--中间内容 start-->
   <!--列表类型 start-->
    <div class="edu-list-filter">
      <div class="edu-container">
       <el-card>
         <template #header>
           <div class="card-header">
             <el-breadcrumb separator="/">
               <el-breadcrumb-item :to="{path: '/'}">首页</el-breadcrumb-item>
               <el-breadcrumb-item :to="{path: '/edu/list'}">类别</el-breadcrumb-item>
               <el-breadcrumb-item><cite>全部</cite></el-breadcrumb-item>
             </el-breadcrumb>
           </div>
         </template>
  
         <div class="edu-card-body">
           <!--课程类型 start-->
           <div class="lesson-cat-item">
             <span><el-icon style="margin-right: 12px;"><ArrowRight /></el-icon>类别：</span>
             <ul>
               <li :class="{'active':activeStatus==0}">
                 <a href="javascript:void(0);" @click="searchLessonType(null)">全部</a>
               </li>
               <li :class="{'active':activeStatus==item.id}" v-for="item in lessonTypeList">
                 <a href="javascript:void(0);" @click="searchLessonType(item.id)">{{item.typeName}}</a>
               </li>
             </ul>
           </div>
           <!--课程类型 end-->

        
           <!--教师 start-->
           <div class="lesson-cat-item">
             <span><el-icon style="margin-right: 12px;"><Memo/></el-icon>教师：</span>
             <ul>
              <li :class="{'active':teacherStatus==0}">
                 <a href="javascript:void(0);" @click="searchTeacher(null)">全部</a>
               </li>
  
               <li :class="{'active':teacherStatus==item.id}" v-for="item in teacherList">
                 <a href="javascript:void(0);" @click="searchTeacher(item.id)">{{item.teacherName}}</a>
               </li>
            
             </ul>
           </div>
           <!-- 教师 end -->
              
           <p class="filter-end">筛选出<span>{{total}}</span>个</p>
         </div>
       </el-card>
      </div>
    </div>
   <!--列表类型 end-->
  
    <!--课程内容列表  start-->
    <div class="edu-lesson-list">
      <div class="edu-lesson-normal">
        <div class="edu-container">
        <el-row :gutter="20">
          <template v-for="item in lessonList">
            <el-col :span="6" style="padding:10px;">
              <router-link target="_blank" class="lesson-list-box" :to="'/edu/details/'+item.id">
                <img :src="url+'uploadFile/'+item.lessonImg" class="lesson-list-cover">
                <h2>{{item.lessonName}}</h2>
                <div>
                <div class="lesson-list-colorbar">
                  <span class="lesson-color-bar" >{{item.eduLessonType.typeName}}</span>
                  <span class="lesson-color-bar" >{{item.eduTeacher.teacherName}}</span>
                </div>
                </div>
  
              </router-link>
            </el-col>
          </template>
        </el-row>
        </div>
      </div>
  
      <!--分页 start-->
       <el-pagination background layout="total,prev,pager,next,jumper" :total="total"
       v-model:page-size="pageSize" @current-change="changePage"/>
      <!--分页 end-->
  
    </div>
    <!--课程内容列表  end-->
  
    <!--中间内容 end-->
  <!--底部组件 start-->
    <Footer/>
  <!--底部组件 end-->
  </template>
  
  <script setup lang="ts">
  import TopHeader from "@/views/edu/comm/TopHeader.vue"
  import Search from "@/views/edu/comm/Search.vue"
  import Footer from "@/views/edu/comm/Footer.vue"
  import {ref, onMounted,watch} from 'vue'
  import {getAllLessonTypeAndTeacherApi, getLessonListApi} from "@/api/edu/list/list"
  import {useRoute} from 'vue-router'
  // 路由参数对象
  const route = useRoute()
  // 定义服务器路径
  const url = import.meta.env.VITE_APP_BASE_API
  // 定义课程类别列表
  const lessonTypeList = ref<object[]>([])
  // 教师信息列表
  const teacherList = ref<object[]>([])
  //获取所有教师信息和课程类别
  const getAllLessonTypeAndTeacher = async ()=> {
    const { data } = await getAllLessonTypeAndTeacherApi()
    lessonTypeList.value = data.result.lessonTypeList
    teacherList.value = data.result.teacherList
  }
  
  // 总条数
  const total = ref(0)
  // 课程列表
  const lessonList = ref<object[]>([])
  // 获取课程内容列表
  const getLessonList = async ()=> {
    const params = {
      'searchValue':searchValue.value,
      'teacherId':teacherId.value,
      'lessonTypeId':lessonTypeId.value,
      'pageIndex':pageIndex.value,
      'pageSize': pageSize.value
    }
    const { data } = await getLessonListApi(params)
    lessonList.value = data.result.content
    total.value = data.result.totalElements
  }
  // 分页变量
  // 每页显示条数
  const pageSize = ref(12)
  // 当前页码
  const pageIndex = ref(1)
  
  // 改变页码执行的事件
  const changePage = (val:number)=> {
    pageIndex.value = val
    getLessonList()
  }
  
  // 课程类型状态
  const activeStatus:any = ref(0)
  // 课程类型id
  const lessonTypeId =ref()
  
  // 根据课程类型搜索课程
  const searchLessonType = (val:number)=> {
    lessonTypeId.value = val
    if(val==null){
      activeStatus.value =0
    }else {
      activeStatus.value = val
    }
    getLessonList()
  }
  
  // 教师状态
  const teacherStatus:any = ref(0)
  // 教师ID
  const teacherId = ref()
  
  // 根据教师ID搜索课程
  const searchTeacher = (val:number)=> {
    teacherId.value = val
    if(val==null){
      teacherStatus.value = 0
    }else {
      teacherStatus.value = val
    }
    getLessonList()
  }
  // 监听搜索关键字
  const searchValue = ref()
  watch(()=>route.query.keywords,(newSearchValue)=>{
    searchValue.value = newSearchValue
    getLessonList()
  })
  onMounted(()=> {
    if(route.query.id){
      lessonTypeId.value = route.query.id
      activeStatus.value = route.query.id
    }
  
    // 教师ID参数
    if (route.query.teacherId){
      teacherId.value = route.query.teacherId
      teacherStatus.value = route.query.teacherId
    }
    searchValue.value = route.query.keywords
  
    getAllLessonTypeAndTeacher()
    getLessonList()
  })
  </script>
  
  <style scoped>
  /*列表类别和教师样式 start*/
  .edu-list-filter {
    margin-top: 30px;
  }
  .edu-container {
    width: 1350px;
    position: relative;
    padding: 0 15px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  
  .edu-list-filter .edu-card-body {
    padding-left: 25px;
    padding-top: 15px;
  }
  
  .lesson-cat-item {
    display: flex;
    padding-bottom: 32px;
    font-size: 16px;
    line-height: 26px;
  }
  
  .edu-list-filter .lesson-cat-item span {
    width: 100px;
    color: #555;
    margin-top: 1px;
  }
  .lesson-cat-item ul {
    width: 80%;
    vertical-align: top;
  }
  .lesson-cat-item ul li {
    margin-right: 27px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
  }
  
  
  
  .edu-list-filter .edu-container li.active a,.edu-list-filter .edu-container li a:hover{
    color: #5eba78;
  }
  

  
  /*列表类别和教师样式 end*/
  
  /*列表内容样式 start*/
  .edu-lesson-list .edu-lesson-normal {
    padding-top: 45px;
    padding-bottom: 60px;
  }
  
  .lesson-list-box {
    display: block;
    background-color: #FFF;
    transition: all .5s;
    -webkit-transition: all .5s;
    padding-bottom: 6px;
    cursor: pointer;
  }
  
  .lesson-list-box .lesson-list-cover {
    height: 200px;
    width: 100%;
  }
  .lesson-list-box h2 {
    font-size: 18px;
    padding: 20px 15px;
    line-height: 26px;
    text-align: center;
  }
  .lesson-list-box>div {
    position: relative;
    padding: 0 15px 15px;
  }
  
  .lesson-list-pay {
    border-color: #FF5722;
    color: #FF5722;
    height: 18px;
    line-height: 18px;
    border-width: 1px;
    border-style: solid;
    padding: 3px 6px;
    font-size: 12px;
  }
  
  .lesson-list-colorbar {
    position: absolute;
    right: 15px;
    top: -1px;
  }
  
  .lesson-color-bar {
    display: inline-block;
    width: 67px;
    height: 20px;
  }
  
  
  /*列表内容样式 end*/
  
  /*分页插件样式 start*/
  .el-pagination {
    margin-top: 20px;
    justify-content: center;
  }
  
  :deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active){
  background-color: #083a6d;
  }
  
  /*分页插件样式 end*/
  </style>
  